import { useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Menu, Stethoscope, Home, Info, User, LogOut, Settings } from 'lucide-react'
import { useAuth } from '@/contexts/auth-context'

interface LayoutProps {
  children: React.ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const [isOpen, setIsOpen] = useState(false)
  const location = useLocation()
  const navigate = useNavigate()
  const { user, isLoggedIn, logout } = useAuth()

  const navigation = [
    { name: '首页', href: '/', icon: Home },
    { name: '关于', href: '/about', icon: Info },
  ]

  // 只有登录用户才能看到个人中心
  const userNavigation = isLoggedIn ? [
    { name: '个人中心', href: '/profile', icon: User },
  ] : []

  const allNavigation = [...navigation, ...userNavigation]

  const isActive = (href: string) => location.pathname === href

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
      {/* Desktop Navigation */}
      <nav className="hidden md:flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md border-b border-blue-100 sticky top-0 z-50">
        <Link to="/" className="flex items-center space-x-2">
          <img 
            src="/logo.png" 
            alt="灵溪医疗助手" 
            className="w-8 h-8 object-contain"
          />
          <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent">
            灵溪医疗助手智能体平台
          </span>
        </Link>
        
        <div className="flex items-center space-x-8">
          {allNavigation.map((item) => {
            const Icon = item.icon
            return (
              <Link
                key={item.name}
                to={item.href}
                className={`flex items-center space-x-1 px-3 py-2 rounded-lg transition-colors ${
                  isActive(item.href)
                    ? 'bg-blue-100 text-blue-700'
                    : 'text-gray-600 hover:text-blue-600 hover:bg-blue-50'
                }`}
              >
                <Icon className="w-4 h-4" />
                <span>{item.name}</span>
              </Link>
            )
          })}
          
          {/* 用户区域 */}
          {isLoggedIn ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center space-x-2 px-3 py-2">
                  <Avatar className="w-8 h-8">
                    <AvatarFallback className="bg-gradient-to-r from-blue-100 to-green-100 text-blue-600">
                      {user?.name?.charAt(0) || 'U'}
                    </AvatarFallback>
                  </Avatar>
                  <span className="text-gray-700">{user?.name}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem onClick={() => navigate('/profile')}>
                  <User className="w-4 h-4 mr-2" />
                  个人中心
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Settings className="w-4 h-4 mr-2" />
                  设置
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={logout} className="text-red-600">
                  <LogOut className="w-4 h-4 mr-2" />
                  退出登录
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <Button 
              onClick={() => navigate('/login')}
              className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800"
            >
              登录
            </Button>
          )}
        </div>
      </nav>

      {/* Mobile Navigation */}
      <nav className="md:hidden flex items-center justify-between px-4 py-3 bg-white/80 backdrop-blur-md border-b border-blue-100 sticky top-0 z-50">
        <Link to="/" className="flex items-center space-x-2">
          <img 
            src="/logo.png" 
            alt="灵溪医疗助手" 
            className="w-7 h-7 object-contain"
          />
          <span className="text-lg font-bold bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent">
            灵溪医疗助手
          </span>
        </Link>
        
        <Sheet open={isOpen} onOpenChange={setIsOpen}>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon">
              <Menu className="w-5 h-5" />
            </Button>
          </SheetTrigger>
          <SheetContent side="right" className="w-64">
            <div className="flex flex-col space-y-4 mt-8">
              {/* 用户信息区域 */}
              {isLoggedIn ? (
                <div className="flex items-center space-x-3 px-4 py-3 bg-blue-50 rounded-lg">
                  <Avatar className="w-10 h-10">
                    <AvatarFallback className="bg-gradient-to-r from-blue-100 to-green-100 text-blue-600">
                      {user?.name?.charAt(0) || 'U'}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium text-gray-900">{user?.name}</p>
                    <p className="text-sm text-gray-600">{user?.email}</p>
                  </div>
                </div>
              ) : (
                <Button 
                  onClick={() => {
                    navigate('/login')
                    setIsOpen(false)
                  }}
                  className="mx-4 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800"
                >
                  登录
                </Button>
              )}
              
              {/* 导航菜单 */}
              {allNavigation.map((item) => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.name}
                    to={item.href}
                    onClick={() => setIsOpen(false)}
                    className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
                      isActive(item.href)
                        ? 'bg-blue-100 text-blue-700'
                        : 'text-gray-600 hover:text-blue-600 hover:bg-blue-50'
                    }`}
                  >
                    <Icon className="w-5 h-5" />
                    <span className="text-base">{item.name}</span>
                  </Link>
                )
              })}
              
              {/* 退出登录 */}
              {isLoggedIn && (
                <>
                  <div className="border-t border-gray-200 my-2"></div>
                  <Button
                    variant="ghost"
                    onClick={() => {
                      logout()
                      setIsOpen(false)
                    }}
                    className="flex items-center space-x-3 px-4 py-3 text-red-600 hover:bg-red-50 justify-start"
                  >
                    <LogOut className="w-5 h-5" />
                    <span className="text-base">退出登录</span>
                  </Button>
                </>
              )}
            </div>
          </SheetContent>
        </Sheet>
      </nav>

      {/* Main Content */}
      <main className="flex-1">
        {children}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-blue-100 px-6 py-8 mt-16">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <img 
                  src="/logo.png" 
                  alt="灵溪医疗助手" 
                  className="w-8 h-8 object-contain"
                />
                <span className="text-lg font-bold text-gray-800">灵溪医疗助手智能体平台</span>
              </div>
              <p className="text-gray-600 text-sm">
                专业的医疗AI智能助手平台，为您提供智能化的医疗咨询服务。
              </p>
            </div>
            
            <div>
              <h3 className="font-semibold text-gray-800 mb-4">友情链接</h3>
              <div className="space-y-2">
                <a href="https://ai.longwingstech.cn" className="block text-sm text-gray-600 hover:text-blue-600 transition-colors">
                  墨刻AI代码生成平台
                </a>
                <a href="https://bi.longwingstech.cn" className="block text-sm text-gray-600 hover:text-blue-600 transition-colors">
                  智能BI平台
                </a>
                <a href="https://translation.longwingstech.cn" className="block text-sm text-gray-600 hover:text-blue-600 transition-colors">
                  智能翻译助手
                </a>
              </div>
            </div>
            
            <div>
              <h3 className="font-semibold text-gray-800 mb-4">联系我们</h3>
              <div className="space-y-2 text-sm text-gray-600">
                <p>邮箱: **********@163.com</p>
                <p>电话: **********</p>
                <p>地址: ******************</p>
              </div>
            </div>
          </div>
          
          <div className="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
            © 2025 灵溪医疗助手智能体平台. 保留所有权利.
          </div>
        </div>
      </footer>
    </div>
  )
}